<template>
  <div class="handcart_Box">
    <div class="handcart_titleBox">
      <div class="titleBox1_l">
        <div class="Title_icon"></div>
        <span class="public_Text">生命体征小推车</span>
      </div>
      <div class="titleBox1_r" @click="addClose"></div>
    </div>
    <!-- <div class="handcart_Box1">
      <div class="hw_Box">
        <div class="hw_lBox">
          <div class="hw_icon"></div>
          <span class="hwSpan">设备状态</span>
        </div>
        <div class="hw_RboxZaixian">在线</div>
        <div class="hw_RboxLixian">离线</div>
        <div class="hw_RboxGuzhang">故障</div>
      </div>
    </div> -->
    <div class="handcart_Box1">
      <div class="hw_Box">
        <div class="hw_lBox">
          <div class="hw_icon1"></div>
          <span class="hwSpan">测量患者数量 (今日)</span>
        </div>
        <div class="hw_RboxTitle">{{shuliang}}次</div>
      </div>
    </div>
    <!-- <div class="handcart_Box3">
      <div class="hw_Box">
        <div class="hw_lBox">
          <div class="hw_icon2"></div>
          <span class="hwSpan">测量结果异常 (今日)</span>
        </div>
        <div class="hw_RboxTitle">0000次</div>
      </div>
    </div> -->
    <div class="handcart_Box4">
      测量记录 <span class="spanHou">测量时间顺序</span>
    </div>
    <div class="handcart_contenBox">
      <!-- 迈瑞 -->
      <div class="handcart_contenItem" v-for="(item,index) in MairuiList" :key="index">
        <div class="ht_tit">
          <div class="ht_Icon">
            <span class="spanAA">{{item?.CWH}}床</span>
          </div>
          <div class="ht_Text">{{item?.XM}}</div>
        </div>
        <div class="ht_tit1">
          <div class="ht_tit1l">时间</div>
          <div class="ht_tit1R">{{item?.MEASURETIME}}</div>
        </div>
        <div class="ht_tit1">
          <div class="ht_tit1l">心率</div>
          <div class="ht_tit1R">{{item?.HR}}</div>
        </div>
        <div class="ht_tit1">
          <div class="ht_tit1l">血压</div>
          <div class="ht_tit1R">{{item.BLOODPRESSURE}}</div>
        </div>
        <div class="ht_tit1">
          <div class="ht_tit1l">血氧饱和度</div>
          <div class="ht_tit1R">{{item.SPO2}}</div>
        </div>
        <div class="ht_tit1">
          <div class="ht_tit1l">呼吸频率</div>
          <div class="ht_tit1R">{{item.RESPIRATION}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ref } from "vue"
  import { postdatacenterdbapiapi } from "@/api/index.js";
  const emit = defineEmits(["clsoehandcart"])
  const addClose = () => {
    emit("clsoehandcart")
  }
  const props = defineProps({
    xiaotuicheObj: {
      type: Object,
      default: true
    }
  })
  const MairuiList = ref([])
  const shuliang = ref("")
  const init =async (data) => {
    let TijiaoList = {}
      TijiaoList = {
        "apiid": `${data.DevicesId}_list`,
        "token": `${data.DevicesId}_list`,
        "appid": "获取迈瑞监测仪信息列表",
        "apptype": "trans"
      }
      const res = await postdatacenterdbapiapi(TijiaoList)
      // console.log(JSON.parse(res.data.data), '迈瑞');
      shuliang.value = JSON.parse(res.data.data).length
      MairuiList.value = JSON.parse(res.data.data)
  }
  watch(
    () => props.xiaotuicheObj,
    (val) => {
      console.log(val, "监听到了小推车的变化")
      init(val)
    },
    {
      deep: true,
      immediate: true
    }
  )
</script>
<style scoped lang="less">
  .handcart_Box {
    width: 100%;
    height: 100%;
    background: url("@/assets/accesscontrol/changbeijing.png") no-repeat center;
    background-size: 100% 100%;

    .handcart_titleBox {
      width: 808px;
      height: 60px;
      position: absolute;
      left: 50%;
      top: 20px;
      transform: translate(-50%, 0);
      display: flex;
      align-items: center;
      justify-content: space-between;

      .titleBox1_l {
        width: 600px;
        height: 60px;
        display: flex;
        align-items: center;

        .Title_icon {
          margin-left: 20px;
          width: 50px;
          height: 50px;
          background: url("@/assets/accesscontrol/xiaotuiche.png") no-repeat center;
          background-size: 100% 100%;
        }

        span {
          margin-left: 20px;
        }
      }

      .titleBox1_r {
        cursor: pointer;
        width: 80px;
        height: 80px;
        background: url("@/assets/PatientInformation/xhao.png") no-repeat center;
        background-size: 100% 100%;
      }
    }

    .handcart_Box1 {
      width: 808px;
      height: 96px;
      position: absolute;
      left: 50%;
      top: 115px;
      transform: translate(-50%, 0);
      border-radius: 20px;
      background: linear-gradient(180deg,
          rgba(225, 242, 255, 0.6) 0%,
          rgba(158, 213, 255, 0.6) 100%);
      display: flex;
      align-items: center;
    }

    .handcart_Box2 {
      width: 808px;
      height: 96px;
      position: absolute;
      left: 50%;
      top: 235px;
      transform: translate(-50%, 0);
      border-radius: 20px;
      background: linear-gradient(180deg,
          rgba(225, 242, 255, 0.6) 0%,
          rgba(158, 213, 255, 0.6) 100%);
      display: flex;
      align-items: center;
    }

    .handcart_Box3 {
      width: 808px;
      height: 96px;
      position: absolute;
      left: 50%;
      top: 355px;
      transform: translate(-50%, 0);
      border-radius: 20px;
      background: linear-gradient(180deg,
          rgba(225, 242, 255, 0.6) 0%,
          rgba(158, 213, 255, 0.6) 100%);
      display: flex;
      align-items: center;
    }

    .handcart_Box4 {
      width: 808px;
      height: 40px;
      position: absolute;
      left: 50%;
      top: 240px;
      transform: translate(-50%, 0);
      font-size: 36px;
      font-weight: 600;
      color: #000;

      .spanHou {
        color: rgba(0, 0, 0, 0.6);
        font-family: "PingFang SC";
        font-size: 30px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }
    }

    .handcart_contenBox {
      width: 808px;
      height: 1140px;
      position: absolute;
      left: 50%;
      top: 300px;
      transform: translate(-50%, 0);
      overflow-y: scroll;
      display: flex;
      flex-wrap: wrap;

      .handcart_contenItem {
        width: 396px;
        height: 368px;
        margin-top: 10px;
        border-radius: 20px;
        border: 1px solid #90a7be;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
      }

      .handcart_contenItem:nth-child(2n) {
        width: 396px;
        height: 368px;
        margin-left: 16px;
        margin-top: 20x;
        border-radius: 20px;
        border: 1px solid #90a7be;
      }

      .ht_tit {
        width: 90%;
        height: 50px;
        margin: auto;
        display: flex;
        align-items: center;

        .ht_Icon {
          width: 93px;
          height: 50px;
          text-align: center;
          background: url("@/assets/PatientInformation/chuanghao.png") no-repeat center;
          background-size: 100% 100%;

          .spanAA {
            font-weight: 600;
            font-size: 30px;
            background: linear-gradient(180deg, #fff 0%, #bef2ff 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }

        .ht_Text {
          margin-left: 20px;
          color: #000;
          text-align: center;
          font-family: "PingFang SC";
          font-size: 30px;
          font-style: normal;
          font-weight: 600;
          line-height: normal;
        }
      }

      .ht_tit1 {
        width: 90%;
        height: 42px;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 30px;
        color: rgba(0, 0, 0, 0.6);
      }
    }

    .hw_Box {
      width: 90%;
      height: 72px;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .hw_lBox {
        display: flex;
        align-items: center;

        .hw_icon {
          width: 72px;
          height: 72px;
          background: url("@/assets/accessControl/yiliaoxiang.png") no-repeat center;
          background-size: 100% 100%;
        }

        .hw_icon1 {
          width: 72px;
          height: 72px;
          background: url("@/assets/accessControl/shengming.png") no-repeat center;
          background-size: 100% 100%;
        }

        .hw_icon2 {
          width: 72px;
          height: 72px;
          background: url("@/assets/accessControl/tanhao.png") no-repeat center;
          background-size: 100% 100%;
        }

        .hwSpan {
          margin-left: 20px;
          font-size: 30px;
          color: #000;
        }
      }

      .hw_RboxTitle {
        color: #000;
        font-size: 30px;
        font-weight: 600;
      }

      .hw_RboxZaixian {
        width: 124px;
        height: 50px;
        border-radius: 100px;
        border: 1px solid #00e7bd;
        background: rgba(255, 255, 255, 0.5);
        font-family: "PingFang SC";
        line-height: 50px;
        text-align: center;
        font-size: 30px;
        font-weight: 600;
        color: #00d889;
      }

      .hw_RboxLixian {
        width: 124px;
        height: 50px;
        border-radius: 100px;
        border: 1px solid #9ea2a7;
        background: rgba(255, 255, 255, 0.5);
        font-family: "PingFang SC";
        line-height: 50px;
        text-align: center;
        font-size: 30px;
        font-weight: 600;
        color: #72787b;
      }

      .hw_RboxGuzhang {
        width: 124px;
        height: 50px;
        border-radius: 100px;
        border: 1px solid #ff5e00;
        background: rgba(255, 255, 255, 0.5);
        font-family: "PingFang SC";
        line-height: 50px;
        text-align: center;
        font-size: 30px;
        font-weight: 600;
        color: #ff5900;
      }
    }
  }
</style>